<template>
	<view>
		<view class="mineHeader" :class="[loginFlag ? 'hasPadd' : '']">
			<div class="noLogin" v-if="!loginFlag" @tap="goLogin">
				<view class="noLoginHead flexAll">
					<view class="iconfont flexAll icon-tianjiayonghu"></view>
				</view>
				<view>登录体验更多精彩~</view>
			</div>
			<template v-if="loginFlag">
				<view class="headImg posAbso" v-if="loginFlag && mineInfo != null" @tap="goSetting">
					<image class="defHead" :src="defHead" v-if="mineInfo.userPortrait == ''"></image>
					<image class="defHead" mode="aspectFill" :src="getCloudFilePath(mineInfo.userPortrait)" v-else></image>
				</view>
				<div class="userInfo posRel" @tap="goSetting">
					<view class="mask posAbso ltzero"></view>
					<div class="content posRel">
						<view class="userName">{{mineInfo.userName}}</view>
						<view class="tag">{{roleName}}</view>
						<image v-if="roleName == zxsRoles" class="perProfile posAbso" src="../../static/images/perFile.png" @tap.stop="viewMyProfile"></image>
					</div>
				</div>
			</template>
		</view>
		<view class="mineCon">
			<template v-if="loginFlag && (roleName == zxsRoles || roleName == gzzRoles)">
				<view class="applyRz posRel"  v-if="(inTag == 0 || inTag == 1) && roleName == zxsRoles">
					<image class="samePar" src="../../static/images/mine/applyRz.png" @tap="goApplyRz"></image>
					<view class="checkTag posAbso" v-if="mineInfo.checkStatus == 1">入驻审核中</view>
					<view class="checkTag posAbso noPass" v-if="mineInfo.checkStatus == 3">审核未通过</view>
				</view>
				<view class="hasRz posRel" v-if="inTag == 2">
					<view class="tag posAbso">负责网格</view>
					<view class="wgItem"
						v-for="(item,index) in mineInfo.workRangeList"
						:key="index"
					>
						<view class="wgTag">
							<text class="iconfont icon-quyu"></text>
							<text>网格</text>
						</view>
						<view>{{item.county}}{{item.town}}{{item.levelB}}</view>
					</view>
				</view>
				<view class="modItem" @tap="goMyZx" v-if="roleName == zxsRoles">
					<view class="iconfont icon-yuyue"></view>
					<view class="itemTit">咨询记录</view>
				</view>
				<view class="modItem" @tap="goMyGy('zxs')">
					<view class="iconfont icon-yuyue"></view>
					<view class="itemTit">干预记录</view>
				</view>
			</template>
			<template v-else>
				<view class="modItem" @tap="goMyYy">
					<view class="iconfont icon-yuyue"></view>
					<view class="itemTit">我的预约</view>
				</view>
				<view class="modItem" @tap="goMyGy('user')">
					<view class="iconfont icon-wodeganyu"></view>
					<view class="itemTit">我的干预</view>
				</view>
				<view class="modItem" @tap="goMyCp">
					<view class="iconfont icon-cepingjigou"></view>
					<view class="itemTit">我的测评</view>
				</view>
			</template>
			<view class="modItem" @tap="goMyAnsQue">
				<view class="iconfont icon-wenda"></view>
				<view class="itemTit">我的问答</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMyZzInfo } from '@/api/mine/index.js'
	export default {
		data() {
			return {
				defHead:this.defHead,
				loginFlag:null,
				roleName:'',
				zxsRoles:this.zxsRole,
				gzzRoles:this.gzzRole,
				inTag:-1,//入驻tag （0：未入驻，1：入驻申请中，2：已入驻）
				mineInfo:null
			}
		},
		onLoad(){
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
		},
		onShow(){
			if(uni.getStorageSync('userIdZz')){
				this.roleName = uni.getStorageSync('roleName');
				this.loginFlag = true;
				this.getMyInfo();
			}else{
				this.loginFlag = false;
			}
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login?loginNum=0'
				})
			},
			goSetting(){
				uni.setStorageSync('basicInfo',this.mineInfo);
				uni.navigateTo({
					url:'/pages/subMine/setting/setting'
				})
			},
			goApplyRz(){
				if(this.inTag == 0){
					uni.navigateTo({
						url:'/pages/subMine/applyRz/zxsArchive?fromPage=minePage'
					})
				}else if(this.inTag == 1){//审核中
					let {checkStatus,failReason} = this.mineInfo;
					let field = { checkStatus,failReason };
					uni.setStorageSync('checkField',field);
					uni.navigateTo({
						url:'/pages/subMine/applyRz/applyRz'
					})
				}
			},
			getMyInfo(){
				getMyZzInfo().then(res=>{
					this.mineInfo = res.data.datas;
					console.log(this.mineInfo)
					if(this.roleName == this.zxsRole || this.roleName == this.gzzRole){
						this.inTag = res.data.datas.inTag;
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			goMyZx(){
				this.commonYy('zxRec');
			},
			goMyYy(){
				this.commonYy('yyRec');
			},
			goMyCp(){
				if(uni.getStorageSync('userIdZz')){
					uni.navigateTo({
						url:'/pages/subMine/myCpRep/myCpRep'
					})
				}else{
					this.comJump();
				}
			},
			goMyGy(opt){
				if(uni.getStorageSync('userIdZz')){
					if(opt == 'user'){
						uni.navigateTo({
							url:'/pages/subMine/myGy/myGy'
						})
					}else{
						uni.navigateTo({
							url:'/pages/subMine/myGy/myGyZxs'
						})
					}
				}else{
					this.comJump();
				}
			},
			commonYy(fromPage){
				if(uni.getStorageSync('userIdZz')){
					uni.navigateTo({
						url:'/pages/subMine/myYy/myYy?fromPage=' + fromPage
					})
				}else{
					this.comJump();
				}
			},
			goMyAnsQue(){
				if(uni.getStorageSync('userIdZz')){
					uni.navigateTo({
						url:'/pages/subMine/myQueAns/myQueAns'
					})
				}else{
					this.comJump();
				}
			},
			viewMyProfile(){
				uni.navigateTo({
					url:'/pages/subMine/applyRz/zxsArchive?fromPage=minePage_sp'
				})
			},
			comJump(){
				uni.navigateTo({
					url:'/pages/login/login?loginNum=0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mineHeader{
		height: calc(var(--hei100) * 3);
		background: linear-gradient(90deg, #C8E4FF 0%, #D9DBFD 100%);
		&.hasPadd{
			display: flex;
			padding: 0 30rpx;
			position: relative;
			display: flex;
			align-items: center;
		}
		.headImg{
			width: 120rpx;
			height: 120rpx;
			background: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 30rpx;
			top: 90rpx;
			z-index: 10;
			.defHead{
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
			}
		}
		.userInfo{
			flex: 1;
			height:100rpx;
			padding-left: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.mask{
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 46.75%, rgba(255, 255, 255, 0.3) 100%);
				border-radius: 50rpx 15rpx 15rpx 50rpx;
				opacity: .4;
				z-index: 1;
			}
			.content{
				position: relative;
				z-index: 10;
				.perProfile{
					width: 32rpx;
					height: 80rpx;
					// font-size: 14rpx;
					// background: $pss-color-blueDeep;
					right: 0;
					top: 0;
				}
			}
			.userName{
				font-size: 30rpx;
				font-weight: 600;
				color: #000;
				margin-bottom: 10rpx;
			}
			.tag{
				padding: 0 20rpx;
				height: 30rpx;
				line-height: 30rpx;
				border:1rpx solid $pss-color-blueDeep;
				border-radius: 50rpx;
				float: left;
				font-size: 22rpx;
				color: $pss-color-blueDeep;
			}
		}
		.noLogin{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 24rpx;
			color: $pss-text-color8;
			.noLoginHead{
				width: 100rpx;
				height: 100rpx;
				background: #fff;
				border-radius: 50%;
				margin-bottom: 15rpx;
				.iconfont{
					width: 90rpx;
					height: 90rpx;
					background: #9EB3FF;
					color: #fff;
					border-radius: 50%;
					&.icon-tianjiayonghu{
						font-size: 50rpx;
					}
				}
			}
		}
	}
	.mineCon{
		background: #fff;
		margin-top: -30rpx;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 30rpx 0;
		position: relative;
		z-index: 12;
		.applyRz{
			width: 100%;
			height: calc(var(--hei80) * 2);
			margin-bottom: 30rpx;
			.checkTag{
				height: 36rpx;
				padding: 0 15rpx;
				font-size: 26rpx;
				color: #fff;
				background: rgba(255, 159, 64, .8);
				border-radius: 8rpx;
				right: 0;
				top: 0;
				z-index: 1;
				&.noPass{
					background:rgba(251, 85, 85, .8) ;
				}
			}
		}
		.hasRz{
			min-height: calc(var(--hei80) * 2);
			background: linear-gradient(90deg, rgba(200, 228, 255, 1) 0%, rgba(217, 219, 253, 1) 100%);
			border-radius: 10rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;
			flex-direction: column;
			justify-content: center;
			.tag{
				padding: 0 15rpx;
				height: 42rpx;
				line-height: 42rpx;
				background: $pss-color-blueDeep;
				border-radius: 0 0 15rpx 15rpx;
				color: #fff;
				font-size: 22rpx;
				right: 30rpx;
				top: 0;
			}
			.wgItem{
				display: flex;
				font-size: 26rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: $pss-text-color3;
				.wgTag{
					width: 100rpx;
					height: 40rpx;
					background: rgba(255,255,255,.6);
					color:$pss-color-blueDeep;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
					border-radius: 8rpx;
					flex-shrink: 0;
					.icon-quyu{
						font-size: 38rpx;
					}
				}
			}
		}
		.modItem{
			box-shadow: 0 0 16rpx rgba(127, 188, 255, .2);
			padding: 0 20rpx;
			height:var(--hei90);
			line-height:var(--hei90);
			display: flex;
			font-size: 28rpx;
			color:$pss-text-color0;
			align-items: center;
			margin-bottom: 30rpx;
			.iconfont{
				margin: 0 30rpx 0 20rpx;
				color: #288EFD;
				font-size: 36rpx;
			}
			.icon-wenda{
				font-size: 38rpx;
			}
		}
	}
</style>
